<template>
  <el-dialog class="modifyPackageDialog"
             :close-on-click-modal="false"
             append-to-body
             title="包修改"
             :visible.sync="visible"
             :show="show"
             width="750px"
             @close="cancle">
    <el-form :model="amendbag"
             size="mini">
      <el-form-item>
        <el-col :span="12">
          <el-form-item label="站点名称："
                        label-width="100px">
            <el-input class="pWidth"
                      v-model="amendbag.websiteName"
                      autocomplete="off"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="URL："
                        label-width="100px">
            <el-input class="pWidth"
                      v-model="amendbag.websiteUrl"
                      autocomplete="off"></el-input>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-col :span="12">
          <el-form-item label="媒体类型："
                        label-width="100px">
            <el-select class="pWidth"
                       v-model="amendbag.isblacklist"
                       placeholder="请选择媒体类型：">
              <el-option v-for="item in mediaTypes"
                         :key="item.id"
                         :label="item.label"
                         :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="操作类型："
                        label-width="100px">
            <el-select class="pWidth"
                       v-model="amendbag.doflag"
                       placeholder="请选择操作类型">
              <el-option v-for="item in types"
                         :key="item.id"
                         :label="item.label"
                         :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item style="text-align: right;width: 97%;">
        <el-upload class="upload-demo"
                   action="#"
                   :http-request="httpRequest"
                   accept=".xls,.xlsx"
                   :on-success="handleSuccess"
                   :on-remove="handleRemove"
                   :before-remove="beforeRemove"
                   :file-list="fileList">
          <el-button type="primary">导入</el-button>
        </el-upload>
        <el-button type="primary"
                   @click="handleSearch">查询</el-button>
      </el-form-item>
    </el-form>
    <div>
      <el-table max-height="300px"
                ref="multipleTable"
                @select="handleSelectionChange"
                :data="bagtable">
        <el-table-column type="selection"
                         width="50"
                         align="center">
        </el-table-column>
        <el-table-column prop="id"
                         label="站点ID"
                         align="center">
        </el-table-column>
        <el-table-column prop="sitename"
                         label="网站名称"
                         align="center">
        </el-table-column>
        <el-table-column prop="siteurl"
                         label="网址"
                         align="center">
        </el-table-column>
      </el-table>
      <el-pagination class="pagination"
                     background
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="currentPage"
                     :pager-count='pagecount'
                     :page-sizes="[5, 10, 15]"
                     :page-size="limit"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </div>
    <div slot="footer"
         class="dialog-footer">
      <el-button @click="cancle"
                 size="mini">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'modifyPackage',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    userBagId: {
      type: Number,
      default: ''
    }
  },
  data () {
    return {
      visible: this.show,
      pagecount: 5, // 分页显示几个按钮
      amendbag: {
        websiteName: '',
        websiteUrl: '',
        isblacklist: '0', // 媒体类型
        doflag: '0' // 操作类型
      },
      bagtable: [],
      total: 0,
      limit: 5,
      currentPage: 1,
      multipleSelection: [],
      fileList: [],
      types: [
        {
          label: '添加',
          id: '0'
        },
        {
          label: '管理',
          id: '1'
        }
      ],
      mediaTypes: [
        {
          label: '非敏感媒体',
          id: '0'
        },
        {
          label: '全部敏感媒体',
          id: '1'
        },
        {
          label: '黑名单',
          id: '2'
        },
        {
          label: '敏感',
          id: '3'
        },
        {
          label: '领导人敏感',
          id: '4'
        }
      ],
      id: ''
    }
  },
  methods: {
    cancle () {
      this.limit = 5
      this.currentPage = 1
      this.total = 0
      this.amendbag = {
        websiteName: '',
        websiteUrl: '',
        isblacklist: '0', // 媒体类型
        doflag: '0' // 操作类型
      }
      this.bagtable = []
      this.$emit('update:show', false)
    },
    // 查询
    handleSearch () {
      this.currentPage = 1
      this.getData()
    },
    // 改变当前显示条数
    handleSizeChange (val) {
      this.limit = val
      this.getData()
    },
    // 当前页数跳转
    handleCurrentChange (val) {
      this.currentPage = val
      this.getData()
    },
    httpRequest (data) {
      let that = this
      let params = new FormData()
      let header = {
        'content-type': 'multipart/form-data'
      }
      params.append('userId ', this.id)
      params.append('userBagId ', this.userBagId)
      params.append('file ', data.file)
      this.$axios
        .post('/userBag/importUserBagWebsite', params, header)
        .then(res => {
          if (res.data.message === '成功') {
            that.getData()
          }
        })
    },
    // 站点列表点击复选框
    handleSelectionChange (selection, row) {
      let header = { 'content-type': 'application/x-www-form-urlencoded' }
      let that = this
      let params = {
        userId: this.id,
        userBagId: this.userBagId,
        websiteId: row.id
      }
      if (this.amendbag.doflag === '1') {
        this.$axios
          .get('/userBag/deleteUserBagWebsite', params, header)
          .then(res => {
            if (res.data.message === '操作成功') {
              that.getData()
            }
          })
      } else {
        this.$axios
          .post('/userBag/addUserBagWebsite', params, header)
          .then(res => {
            if (res.data.message === '操作成功') {
              that.getData()
            }
          })
      }
    },
    // 上传成功
    handleSuccess (response, file, fileList) {
      // this.setFormData({ data: { file: fileList[0] } });
    },
    // 移除文件
    handleRemove (file, fileList) {
      // this.setFormData({ data: { file: fileList[0] } });
    },
    // 移除文件前
    beforeRemove (file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    // 获取站点数据
    getData () {
      let that = this
      let params = { ...this.amendbag }
      params.page = this.currentPage
      params.limit = this.limit
      params.userBagId = this.userBagId
      this.$axios.get('/userBag/searchUserBagWebsite', params).then(res => {
        if (res.status === 200) {
          let result = res.data.result
          that.total = res.data.count
          that.bagtable = result
        }
      })
    }
  },
  mounted () {
    if (JSON.parse(localStorage.getItem('userlist'))) {
      this.id = JSON.parse(localStorage.getItem('userlist')).id
    }
  },
  watch: {
    show (val) {
      this.visible = this.show
      if (val) {
        this.getData()
      }
    }
  }
}
</script>

<style scoped>
.pWidth {
  width: 90%;
}
.upload-demo {
  display: inline-block;
}
.pagination {
  margin-top: 20px;
  text-align: center;
}
</style>
